<template>
	<view>
		<MyHeaderVue></MyHeaderVue>
		<view class="live_categories">
			<view class="categories_item" v-for="(item,index) in cateList" :class="{active:index===cateIndex}"
				@click="changeCate(index)">
				{{item.name}}
			</view>
			<view class="pos-a index-mark" style="width: 33.3333%;"
				:style="{ '--translate-x': `${cateIndex * 100}%`,'--item-width': '33.3333%'}">
			</view>
		</view>
		<view class="live_box">
			<swiper class="swiper" circular :current="cateIndex" @change="onSwiperChange">
				<swiper-item>
					<view class="swiper-item" v-for="item in hotLive" @click="gotoDetails(item.roomId,item.actUserId)">
						<view class="actor_info">
							<view class="avatar" :style="{backgroundImage:`url(${item.avatar})`}">

							</view>
							<view class="name">
								{{item.userName}}
							</view>
						</view>
						<view class="main" :style="{backgroundImage:`url(${item.bgImg})`}">
							<view class="live_info_mask">
								<view class="live_info">
									<view class="dot"></view>
									<view class="status">
										直播中
									</view>
									<view class="warch_num">
										3.6w
									</view>
								</view>
								<view class="live_title">
									{{item.intro}}
								</view>
								<view class="goods_list">
									<view class="item" v-for="aaa in item.shopCarts.goods"
										:style="{backgroundImage:`url(${aaa.cover})`}">
										<text>￥{{aaa.price}}</text>
									</view>
								</view>
								<view class="mona_comment">
									<view class="comment_item" v-for="aaa in item.comments">
										<view class="comment_avatar" :style="{backgroundImage:`url(${aaa.avatar})`}">
										</view>
										<view class="message">
											{{aaa.content}}
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item" v-if="chuangLive" v-for="item in chuangLive"
						@click="gotoDetails(item.roomId,item.actUserId)">
						<view class="actor_info">
							<view class="avatar" :style="{backgroundImage:`url(${item.avatar})`}">

							</view>
							<view class="name">
								{{item.userName}}
							</view>
						</view>
						<view class="main" :style="{backgroundImage:`url(${item.bgImg})`}">
							<view class="live_info_mask">
								<view class="live_info">
									<view class="dot"></view>
									<view class="status">
										直播中
									</view>
									<view class="warch_num">
										3.6w
									</view>
								</view>
								<view class="live_title">
									{{item.intro}}
								</view>
								<view class="goods_list">
									<view class="item" v-for="aaa in item.shopCarts.goods"
										:style="{backgroundImage:`url(${aaa.cover})`}">
										<text>￥{{aaa.price}}</text>
									</view>
								</view>
								<view class="mona_comment">
									<view class="comment_item" v-for="aaa in item.comments">
										<view class="comment_avatar" :style="{backgroundImage:`url(${aaa.avatar})`}">
										</view>
										<view class="message">
											{{aaa.content}}
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item" v-if="meiLive" v-for="item in meiLive"
						@click="gotoDetails(item.roomId,item.actUserId)">
						<view class="actor_info">
							<view class="avatar" :style="{backgroundImage:`url(${item.avatar})`}">

							</view>
							<view class="name">
								{{item.userName}}
							</view>
						</view>
						<view class="main" :style="{backgroundImage:`url(${item.bgImg})`}">
							<view class="live_info_mask">
								<view class="live_info">
									<view class="dot"></view>
									<view class="status">
										直播中
									</view>
									<view class="warch_num">
										3.6w
									</view>
								</view>
								<view class="live_title">
									{{item.intro}}
								</view>
								<view class="goods_list">
									<view class="item" v-for="aaa in item.shopCarts.goods"
										:style="{backgroundImage:`url(${aaa.cover})`}">
										<text>￥{{aaa.price}}</text>
									</view>
								</view>
								<view class="mona_comment">
									<view class="comment_item" v-for="aaa in item.comments">
										<view class="comment_avatar" :style="{backgroundImage:`url(${aaa.avatar})`}">
										</view>
										<view class="message">
											{{aaa.content}}
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	import {
		get
	} from '../../api/index.js'
	import MyHeaderVue from '../../components/MyHeader/MyHeader.vue'

	const cateIndex = ref(0)
	const cateList = ref([])
	const hotLive = ref([])
	const chuangLive = ref([])
	const meiLive = ref([])

	const onSwiperChange = (e) => {
		cateIndex.value = e.detail.current
	}

	const changeCate = (index) => {
		cateIndex.value = index
	}
	const getLiveCate = async () => {
		const res = await get('/live/tabHeader')
		cateList.value = res.data.tabs.items
	}
	const getLiveList = async () => {
		const res1 = await get('/live/tabList', {
			tabId: 1,
			pageIndex: 1
		})
		console.log(res1.data.lives);
		hotLive.value = res1.data.lives
		const res2 = await get('/live/tabList', {
			tabId: 60,
			pageIndex: 1
		})
		chuangLive.value = res2.data.lives
		const res3 = await get('/live/tabList', {
			tabId: 61,
			pageIndex: 1
		})
		meiLive.value = res3.data.lives
	}
	const gotoDetails = (roomId, actorId) => {
		uni.navigateTo({
			url: `/pages/liveDetails/liveDetails?roomId=${roomId}&actorId=${actorId}`,
		})
	}
	getLiveCate()
	getLiveList()
</script>

<style lang="scss">
	.live_categories {
		display: flex;
		width: 100%;
		background-color: #fff;
		height: 90rpx;
		align-items: center;
		position: relative;


		.categories_item {
			width: 33.3333%;
			height: 100%;
			line-height: 90rpx;
			text-align: center;

			&.active {
				color: #ff5777;
			}
		}

		.pos-a {
			font-size: 14px;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 0 40rpx;
			width: var(--item-width);
			transform: translateX(var(--translate-x));
			transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

			&::before {
				display: block;
				background-color: #ff5777;
				content: '';
				height: 4rpx;
			}
		}
	}

	.swiper {
		height: calc(100vh - 288rpx);
		overflow: hidden;

		:deep(.uni-swiper-wrapper) {
			height: calc(100vh - 288rpx);
			overflow-y: scroll !important;
			// padding-bottom: 500rpx;

			uni-swiper-item {
				overflow: visible;
			}
		}

		.swiper-item {
			background-color: #fff;
			padding: 12rpx 24rpx;
			height: auto;
			overflow-y: auto;

			box-sizing: border-box;

			.actor_info {
				display: flex;
				column-gap: 18rpx;
				height: 84rpx;
				box-sizing: border-box;

				.avatar {
					width: 94rpx;
					height: 94rpx;
					border-radius: 50%;
					background-size: cover;
					background-repeat: no-repeat;
					transform: translateY(20%);
					border: 4rpx solid hsla(0, 0%, 100%, .9);
					background-image: url('/static/logo.png');
					margin-left: 24rpx;
				}

				.name {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
					line-height: 110rpx;
				}
			}

			.main {
				background-size: 100% auto;
				background-position: 50%;
				background-repeat: no-repeat;
				height: 400rpx;
				display: flex;
				flex-direction: column;
				border: 8rpx;
				border-radius: 8rpx;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;


				.live_info_mask {
					margin-top: auto;
					position: relative;
					padding: 10rpx 24rpx 24rpx;
					background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .4));

					.live_info {
						padding: 0 10rpx;
						width: fit-content;
						display: flex;
						align-items: center;
						height: 38rpx;
						color: #fff;
						background-color: rgba(0, 0, 0, .26);
						border-radius: 6rpx;
						line-height: 1;

						.dot {
							margin-right: 10rpx;
							width: 17rpx;
							height: 17rpx;
							border-radius: 50%;
							background-color: #f5342f;
						}

						.status {
							font-size: 20rpx;
						}

						.warch_num {
							display: inline-block;
							padding-left: 25rpx;
							background: url('/static/fire.png') 5rpx 0 no-repeat;
							background-size: 17rpx auto;
							margin-left: 9rpx;
							border-left: 2rpx solid hsla(0, 0%, 100%, .3);
							font-size: 20rpx;

						}
					}

					.live_title {
						margin-top: 10rpx;
						font-size: 32rpx;
						color: #fff;
						text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
					}

					.goods_list {
						display: flex;
						margin-top: 17rpx;
						height: 120rpx;
						gap: 10rpx;

						.item {
							width: 120rpx;
							background-size: 100% auto;
							background-repeat: no-repeat;
							display: flex;
							flex-direction: column;

							text {
								box-sizing: border-box;
								margin-top: auto;
								height: 37rpx;
								background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6));
								font-size: 20rpx;
								padding-left: 10rpx;
								color: #fff;
							}
						}
					}

					.mona_comment {
						position: absolute;
						bottom: 24rpx;
						right: 24rpx;
						width: 240rpx;
						height: 120rpx;
						overflow: hidden;

						.comment_item {
							display: flex;
							opacity: .8;
							margin-top: 8rpx;

							.comment_avatar {
								margin-right: 7rpx;
								width: 28rpx;
								height: 28rpx;
								border-radius: 50%;
								background-size: 100% auto;
								background-repeat: no-repeat;
							}

							.message {
								flex: 1;
								display: block;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								color: #fff;
								font-weight: 500;
								font-size: 22rpx;
								text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, .35);
							}
						}


					}
				}
			}
		}
	}
</style>